<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邻里社区</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 480px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            position: relative;
        }

        /* 顶部导航 */
        .header {
            position: sticky;
            top: 0;
            background: #2e8b57;
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 18px;
            font-weight: 600;
        }

        .header-actions {
            display: flex;
            gap: 15px;
        }

        .header-actions i {
            font-size: 18px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .header-actions i:hover {
            transform: scale(1.1);
        }

        /* 消息列表 */
        .message-list {
            padding-bottom: 70px;
        }

        .message-item {
            display: flex;
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            position: relative;
            cursor: pointer;
            transition: background-color 0.2s;
            background-color: white;
        }

        .message-item:hover {
            background-color: #f9f9f9;
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4a89dc, #5d9cec);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-weight: bold;
            color: white;
            font-size: 18px;
        }

        .message-content {
            flex: 1;
            overflow: hidden;
        }

        .message-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .name {
            font-weight: 600;
            font-size: 16px;
            color: #333;
        }

        .time {
            color: #999;
            font-size: 12px;
        }

        .preview {
            color: #666;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .unread-count {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: #e74c3c;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        /* 聊天框 */
        .chat-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            z-index: 200;
        }

        .chat-header {
            position: sticky;
            top: 0;
            background: #2e8b57;
            color: white;
            padding: 15px;
            display: flex;
            align-items: center;
            z-index: 100;
        }

        .chat-header .back-btn {
            margin-right: 15px;
            font-size: 20px;
            cursor: pointer;
        }

        .chat-header .chat-title {
            font-size: 17px;
            font-weight: 600;
            flex: 1;
        }

        .chat-header-actions {
            display: flex;
            gap: 10px;
        }

        .chat-header-action {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .chat-messages {
            padding: 15px;
            height: calc(100vh - 120px);
            overflow-y: auto;
            background-color: #f0f2f5;
        }

        .message {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.3s ease-out;
        }

        .message.received {
            align-items: flex-start;
        }

        .message.sent {
            align-items: flex-end;
        }

        .message-bubble {
            max-width: 75%;
            padding: 10px 15px;
            border-radius: 18px;
            word-wrap: break-word;
            line-height: 1.4;
        }

        .received .message-bubble {
            background: white;
            border-top-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .sent .message-bubble {
            background: #2e8b57;
            color: white;
            border-top-right-radius: 4px;
        }

        .message-time {
            font-size: 11px;
            color: #999;
            margin-top: 5px;
        }

        .chat-input {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 10px;
            border-top: 1px solid #eee;
            display: flex;
            align-items: center;
        }

        .chat-input input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 25px;
            outline: none;
            font-size: 14px;
        }

        .chat-input button {
            margin-left: 10px;
            background: #2e8b57;
            color: white;
            border: none;
            border-radius: 50%;
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 480px;
            display: flex;
            background: white;
            border-top: 1px solid #eee;
            z-index: 100;
        }

        .nav-item {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            color: #666;
            cursor: pointer;
        }

        .nav-item.active {
            color: #2e8b57;
        }

        .nav-item i {
            font-size: 20px;
            display: block;
            margin-bottom: 4px;
        }

        .nav-item span {
            font-size: 12px;
        }

        /* 模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 300;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            width: 85%;
            max-width: 400px;
            max-height: 70vh;
            overflow-y: auto;
        }

        .modal h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .list-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            align-items: center;
        }

        .list-item-actions button {
            padding: 5px 12px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }

        .unblock-btn {
            background: #2e8b57;
            color: white;
        }

        .empty-state {
            text-align: center;
            padding: 20px;
            color: #999;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 消息列表页 -->
        <div id="message-list-page">
            <div class="header">
                <h1>消息</h1>
                <div class="header-actions">
                    <i class="fas fa-user-friends" id="friends-btn" title="好友列表"></i>
                    <i class="fas fa-ban" id="blocked-btn" title="黑名单"></i>
                </div>
            </div>
            
            <div class="message-list" id="message-list">
                <!-- 消息项将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <!-- 聊天详情页 -->
        <div id="chat-page" class="chat-container">
            <div class="chat-header">
                <div class="back-btn"><i class="fas fa-arrow-left"></i></div>
                <div class="chat-title">聊天详情</div>
                <div class="chat-header-actions">
                    <div class="chat-header-action" id="add-friend-btn" title="加好友">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="chat-header-action" id="block-user-btn" title="拉黑">
                        <i class="fas fa-ban"></i>
                    </div>
                </div>
            </div>
            
            <div class="chat-messages" id="chat-messages">
                <!-- 聊天消息将通过JavaScript动态生成 -->
            </div>
            
            <div class="chat-input">
                <input type="text" id="message-input" placeholder="输入消息..." autocomplete="off">
                <button id="send-btn"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-exchange-alt"></i>
                <span>交易</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-store"></i>
                <span>商城</span>
            </div>
            <div class="nav-item active">
                <i class="fas fa-comment-dots"></i>
                <span>消息</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- 好友列表浮层 -->
        <div id="friends-modal" class="modal">
            <div class="modal-content">
                <h3>好友列表</h3>
                <div id="friends-list"></div>
            </div>
        </div>

        <!-- 黑名单浮层 -->
        <div id="blocked-modal" class="modal">
            <div class="modal-content">
                <h3>黑名单</h3>
                <div id="blocked-list"></div>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const conversations = [
            {
                id: 1,
                name: "张邻居",
                avatar: "张",
                lastMessage: "你好，请问你的钥匙找到了吗?",
                time: "14:20",
                unread: 3,
                isFriend: false,
                isBlocked: false,
                messages: [
                    { text: "你好，请问你的钥匙找到了吗?", time: "14:20", isMe: false },
                    { text: "我在楼下捡到一把钥匙", time: "14:18", isMe: false },
                    { text: "我还没找到，是什么样的钥匙?", time: "14:15", isMe: true }
                ]
            },
            {
                id: 2,
                name: "李阿姨",
                avatar: "李",
                lastMessage: "你的烘焙工具能便宜点吗?",
                time: "昨天",
                unread: 0,
                isFriend: false,
                isBlocked: false,
                messages: [
                    { text: "你的烘焙工具能便宜点吗?", time: "昨天", isMe: false },
                    { text: "最低可以280元", time: "昨天", isMe: true },
                    { text: "我考虑一下", time: "昨天", isMe: false }
                ]
            },
            {
                id: 3,
                name: "王先生",
                avatar: "王",
                lastMessage: "自行车什么时候可以看货?",
                time: "09-18",
                unread: 1,
                isFriend: false,
                isBlocked: false,
                messages: [
                    { text: "自行车什么时候可以看货?", time: "09-18", isMe: false },
                    { text: "这周六下午可以吗?", time: "09-17", isMe: true }
                ]
            },
            {
                id: 4,
                name: "社区管理员",
                avatar: "社",
                lastMessage: "系统维护通知: 本周六晚10点至周日凌晨2点进行系...",
                time: "09-18",
                unread: 0,
                isFriend: false,
                isBlocked: false,
                messages: [
                    { text: "系统维护通知: 本周六晚10点至周日凌晨2点进行系统维护", time: "09-18", isMe: false },
                    { text: "收到", time: "09-18", isMe: true }
                ]
            }
        ];

        // 随机回复消息
        const randomReplies = [
            "好的，我知道了",
            "谢谢你的消息",
            "我明白了",
            "这个问题我需要考虑一下",
            "稍等，我查一下",
            "这个建议不错",
            "我同意你的看法",
            "我们改天再聊",
            "你最近怎么样？",
            "这个价格可以接受吗？",
            "什么时候方便见面？",
            "我会尽快回复你",
            "请稍等一下",
            "这个功能很好用",
            "我需要更多信息"
        ];

        // 当前活跃的聊天ID
        let activeChatId = null;

        // 初始化应用
        function initApp() {
            renderMessageList();
            renderFriendsList();
            renderBlockedList();
            
            // 好友列表按钮点击事件
            document.getElementById('friends-btn').addEventListener('click', () => {
                document.getElementById('friends-modal').style.display = 'flex';
            });
            
            // 黑名单按钮点击事件
            document.getElementById('blocked-btn').addEventListener('click', () => {
                document.getElementById('blocked-modal').style.display = 'flex';
            });
            
            // 关闭模态框
            document.querySelectorAll('.modal').forEach(modal => {
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) {
                        modal.style.display = 'none';
                    }
                });
            });
            
            // 加好友按钮点击事件
            document.getElementById('add-friend-btn').addEventListener('click', (e) => {
                if (activeChatId) toggleFriend(e, activeChatId);
            });
            
            // 拉黑按钮点击事件
            document.getElementById('block-user-btn').addEventListener('click', (e) => {
                if (activeChatId) blockUser(e, activeChatId);
            });
            
            // 发送按钮点击事件
            document.getElementById('send-btn').addEventListener('click', sendMessage);
            
            // 输入框回车事件
            document.getElementById('message-input').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });

            // 返回按钮点击事件
            document.querySelector('.back-btn').addEventListener('click', () => {
                document.getElementById('chat-page').style.display = 'none';
                document.getElementById('message-list-page').style.display = 'block';
                activeChatId = null;
            });
        }

        // 渲染消息列表
        function renderMessageList() {
            const messageList = document.getElementById('message-list');
            messageList.innerHTML = '';
            
            // 按时间降序排序
            const sortedConversations = [...conversations]
                .filter(c => !c.isBlocked)
                .sort((a, b) => {
                    return new Date(b.time) - new Date(a.time);
                });
            
            sortedConversations.forEach(conversation => {
                const messageItem = document.createElement('div');
                messageItem.className = 'message-item';
                messageItem.dataset.id = conversation.id;
                
                messageItem.innerHTML = `
                    <div class="avatar">${conversation.avatar}</div>
                    <div class="message-content">
                        <div class="message-top">
                            <div class="name">${conversation.name}</div>
                            <div class="time">${conversation.time}</div>
                        </div>
                        <div class="preview">${conversation.lastMessage}</div>
                    </div>
                    ${conversation.unread > 0 ? `<div class="unread-count">${conversation.unread}</div>` : ''}
                `;
                
                messageItem.addEventListener('click', () => openChat(conversation.id));
                messageList.appendChild(messageItem);
            });
        }

        // 渲染好友列表
        function renderFriendsList() {
            const friendsList = document.getElementById('friends-list');
            friendsList.innerHTML = '';
            
            const friends = conversations.filter(c => c.isFriend && !c.isBlocked);
            
            if (friends.length === 0) {
                friendsList.innerHTML = '<div class="empty-state">暂无好友</div>';
                return;
            }
            
            friends.forEach(conversation => {
                const item = document.createElement('div');
                item.className = 'list-item';
                item.innerHTML = `
                    <div>
                        <div style="font-weight: 500;">${conversation.name}</div>
                        <div style="font-size: 12px; color: #999;">${conversation.lastMessage}</div>
                    </div>
                    <div class="list-item-actions">
                        <button onclick="toggleFriend(event, ${conversation.id})">移除</button>
                    </div>
                `;
                friendsList.appendChild(item);
            });
        }

        // 渲染黑名单列表
        function renderBlockedList() {
            const blockedList = document.getElementById('blocked-list');
            blockedList.innerHTML = '';
            
            const blockedUsers = conversations.filter(c => c.isBlocked);
            
            if (blockedUsers.length === 0) {
                blockedList.innerHTML = '<div class="empty-state">黑名单为空</div>';
                return;
            }
            
            blockedUsers.forEach(conversation => {
                const item = document.createElement('div');
                item.className = 'list-item';
                item.innerHTML = `
                    <div>
                        <div style="font-weight: 500;">${conversation.name}</div>
                        <div style="font-size: 12px; color: #999;">${conversation.lastMessage}</div>
                    </div>
                    <div class="list-item-actions">
                        <button class="unblock-btn" onclick="unblockUser(${conversation.id})">恢复</button>
                    </div>
                `;
                blockedList.appendChild(item);
            });
        }

        // 打开聊天
        function openChat(id) {
            const conversation = conversations.find(c => c.id == id);
            if (!conversation) return;
            
            activeChatId = id;
            
            // 更新标题
            document.querySelector('.chat-title').textContent = conversation.name;
            
            // 更新好友状态按钮
            const addFriendBtn = document.getElementById('add-friend-btn');
            if (conversation.isFriend) {
                addFriendBtn.innerHTML = '<i class="fas fa-user-check"></i>';
                addFriendBtn.title = '已是好友';
            } else {
                addFriendBtn.innerHTML = '<i class="fas fa-user-plus"></i>';
                addFriendBtn.title = '加好友';
            }
            
            // 渲染消息
            const chatMessages = document.getElementById('chat-messages');
            chatMessages.innerHTML = '';
            
            conversation.messages.forEach(msg => {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${msg.isMe ? 'sent' : 'received'}`;
                messageDiv.innerHTML = `
                    <div class="message-bubble">${msg.text}</div>
                    <div class="message-time">${msg.time}</div>
                `;
                chatMessages.appendChild(messageDiv);
            });
            
            // 滚动到底部
            chatMessages.scrollTop = chatMessages.scrollHeight;
            
            // 显示聊天页
            document.getElementById('chat-page').style.display = 'block';
            document.getElementById('message-list-page').style.display = 'none';
            
            // 标记为已读
            markAsRead(conversation.id);
        }

        // 标记消息为已读
        function markAsRead(conversationId) {
            const conversation = conversations.find(c => c.id == conversationId);
            if (conversation && conversation.unread > 0) {
                conversation.unread = 0;
                renderMessageList();
            }
        }

        // 切换好友状态
        function toggleFriend(event, id) {
            if (event) event.stopPropagation();
            const conversation = conversations.find(c => c.id === id);
            if (conversation) {
                conversation.isFriend = !conversation.isFriend;
                renderMessageList();
                renderFriendsList();
                
                // 更新按钮状态
                const addFriendBtn = document.getElementById('add-friend-btn');
                if (conversation.isFriend) {
                    addFriendBtn.innerHTML = '<i class="fas fa-user-check"></i>';
                    addFriendBtn.title = '已是好友';
                    showToast('已添加为好友');
                } else {
                    addFriendBtn.innerHTML = '<i class="fas fa-user-plus"></i>';
                    addFriendBtn.title = '加好友';
                    showToast('已移除好友');
                }
            }
        }

        // 拉黑用户
        function blockUser(event, id) {
            if (event) event.stopPropagation();
            const conversation = conversations.find(c => c.id === id);
            if (conversation) {
                conversation.isBlocked = true;
                conversation.isFriend = false;
                renderMessageList();
                renderFriendsList();
                renderBlockedList();
                
                // 如果当前正在聊天，则返回消息列表
                if (activeChatId === id) {
                    document.getElementById('chat-page').style.display = 'none';
                    document.getElementById('message-list-page').style.display = 'block';
                    activeChatId = null;
                }
                
                showToast('已拉黑用户');
            }
        }

        // 恢复用户
        function unblockUser(id) {
            const conversation = conversations.find(c => c.id === id);
            if (conversation) {
                conversation.isBlocked = false;
                renderBlockedList();
                renderMessageList();
                showToast('已恢复用户');
            }
        }

        // 获取当前时间字符串
        function getCurrentTime() {
            const now = new Date();
            return `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
        }

        // 发送消息
        function sendMessage() {
            const input = document.getElementById('message-input');
            const message = input.value.trim();
            
            if (message && activeChatId) {
                const conversation = conversations.find(c => c.id == activeChatId);
                if (conversation) {
                    const now = new Date();
                    const timeStr = getCurrentTime();
                    
                    // 添加用户消息
                    const userMessage = {
                        text: message,
                        time: timeStr,
                        isMe: true
                    };
                    
                    conversation.messages.push(userMessage);
                    conversation.lastMessage = message.length > 20 ? message.substring(0, 20) + '...' : message;
                    conversation.time = timeStr;
                    
                    // 渲染聊天
                    renderChat(activeChatId);
                    
                    // 清空输入框
                    input.value = '';
                    
                    // 模拟对方随机回复（1-3秒后）
                    setTimeout(() => {
                        const randomIndex = Math.floor(Math.random() * randomReplies.length);
                        const reply = randomReplies[randomIndex];
                        const replyTime = getCurrentTime();
                        
                        const replyMessage = {
                            text: reply,
                            time: replyTime,
                            isMe: false
                        };
                        
                        conversation.messages.push(replyMessage);
                        conversation.lastMessage = reply.length > 20 ? reply.substring(0, 20) + '...' : reply;
                        conversation.time = replyTime;
                        conversation.unread = 0;
                        
                        renderChat(activeChatId);
                        renderMessageList();
                    }, 1000 + Math.random() * 2000);
                }
            }
        }

        // 显示操作反馈
        function showToast(message) {
            const toast = document.createElement('div');
            toast.textContent = message;
            toast.style.position = 'fixed';
            toast.style.bottom = '80px';
            toast.style.left = '50%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '5px';
            toast.style.zIndex = '1000';
            toast.style.animation = 'fadeIn 0.3s, fadeOut 0.3s 2s forwards';
            document.body.appendChild(toast);
            
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 2500);
        }

        // 初始化应用
        window.onload = initApp;
    </script>
</body>
</html>
